<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath",basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    <script type="text/javascript" src="${basePath}js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="${basePath }js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
      //返回一个随机日期
      function randomDate(){
          var Y = 2000+Math.round(Math.random()*10);
          var M = 1 + Math.round(Math.random()*11);
          var D = 1 + Math.round(Math.random()*27);
          return Y+'-'+'M'+ '-'+ D;
      }
</script>
  </head>
  
  <body>
    This is my JSP page. <br>
   1、点击input日期事件：<input id="d12" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readOnly/><br>
   2、点击日期图片事件：<input id="date" type="text"/><img src="${basePath }js/My97DatePicker/skin/datePicker.gif" onclick="WdatePicker({el:'date'})" width="16" height="22" align="absmiddle"><br>
   3、周显示应用：<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/><br>
   4、利用onpicked事件把周赋值给另外的文本框：<br>(<font color="red">注释：this-->指向文本框；dp-->指向$dp;dp.cal-->指向日期控件对象</font>)<br>
   <input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true,onpicked:function(){$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>
   你选择了第<input type="text" style="width:30px" id="d122_1">(W格式周)，另外你还可以使用WW格式：<input type="text" id="d122_2" style="width:30px"/><br>
   5、<font color="red">设置readOnly属性true或false可指定日期框是否只读<br>
      设置highLineWeekDay属性true或false可指定是否是高亮周末<br>
      清空按钮或今天按钮,可以根据需要进行自定义，他们分别对应isShowClear和isShowToday，默认值都是true</font><br>
      <input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/><br>
   6、<font color="red">当控件处在页面边界时，它会自动选择显示的位置，所以没有必要担心弹出框会被页面边界遮住的问题<br>
      此外你还可以使用position参数对弹出位置做调整。<br>
      <input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})" />
    </font><br>
   7、平面显示演示：<br>
     <div id="div1"></div>
     <script type="text/javascript">
         WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的的日期是：'+dp.cal.getDateStr())}})
     </script><br>
   8.支持多种容器<font color="red">除了可以将值返回给input外，还值返回给其他的元素（如：textarea,div,span）等，带有innerHtml属性的HTML</font><br>
   <span id="demospan">2008-11-14</span>
   <img onclick="WdatePicker({el:'demospan'})" src="${basePath }js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/><br>
   9.起始日期功能：<font color="red">起始日期为1980-05-01，当日期框为空时，将使用1980-05-01作为起始日期</font><br>
   <input type="text" id="d221" onfocus="WdatePicker({startDate:'1980-05-01'})" /><br>
   <font color="red">alwaysUseStartDate属性应用，默认的起始日期为1980-05-01，当日期框无论是何值，始终使用1980-05-01作为起始日期</font><br>
   <input type="text" id="d222" onFocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})" /><br>
   10、使用内置参数，<font color="red">除了使用静态日期值以外，还可以使用动态参数（如：%y,%分别表示当前年和月）</font><br>
   下例演示，年月日使用当年当月的1日，时分秒使用00：00：00作为起始时间<br>
   <input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" /><br>
   11、时分秒<br>
   <input type="text" id="d242" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate" /><br>
   12.取得系统可识别的日期值，<font color="red">类似于1999年7月5日，这样的日期是不能被系统识别的，必须转换为能识别的类型如：1999-07-05</font><br>
   <input type="text" id="d244" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})" /><input id="d244_2" type="text" /><br>
   13.民国年日历，<font color="red">当年份格式设置为yyy时，利用年份差量属性yearOffset(默认值1911民国元年)，可实现民国年日历和其他特殊日历</font><br>
   <input type="text" id="d28" onclick="WdatePicker({dateFmt:'yyy/MM/dd'})" /><br>
   14.时间范围的限制<br>
     限制日期范围是2006-09-10到2008-12-20：<input type="text" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})" /><br>
     限制日期范围是2008-03-08 11:30:00到 2008-03-10 20：59：30：<input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})"/><br>
     限制日期范围是2008年3月到2008年5月：<input type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-03',maxDate:'2008-05'})" /><br>
   15.动态设置日期范围：<font color="red">只能选择今天以前的日期（包括今天）</font><br>
    <input type="text" id="d421" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})" /><br>
    <font color="red">只能选择今天以后的日期（包括今天）</font><br>
    <input type="text" id="d422" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',minDate:'%y-%M-{%d+1}'})" /><br>
  16.发挥你的JS才能，定义任何你想要的日期限制<br>
    <input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
   
   
  </body>
</html>

